<template>
  <div class="container">
    <div class="box">
      <div class="left">
        <img :src="imgUrl" alt="每日图片">
      </div>
      <div class="right">
        <Login v-if="isLogin === 0" />
        <Register v-else />
        <div class="changeWindow" :style="zoom" @click="changeWindow" @mouseover="startZoom" @mouseleave="stopZoom">
          <a-tooltip>
            <template #title>{{isLogin===0?'去注册':'去登录'}}</template>
            <arrow-right-outlined v-if="isLogin===0" />
            <arrow-left-outlined v-else/>
          </a-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import myAxios from "../axios.js";
import Login from "../components/Login.vue";
import Register from "../components/Register.vue";
import { ArrowRightOutlined,ArrowLeftOutlined } from '@ant-design/icons-vue';
const imgUrl = ref('')
const isLogin = ref(0);
const zoom = ref({})
const changeWindow = () => {
  isLogin.value = isLogin.value === 0? 1: 0;
}
onMounted(() => {
  myAxios.get("/sentence/daily").then(
      res => {
        console.log(res);
        imgUrl.value = res.data.fenxiang_img;
      }
  )
})
const startZoom= () => {
  zoom.value = {
    transform: 'translateX(-50%) scale(1.8) scale(0.7) scale(1)' /* 缩放比例，这里设为1.1表示放大10% */
  }
};
const stopZoom= () => {
  zoom.value = {};
}
</script>

<style scoped>
.container{
  width: 100vw;
  height: 100vh;
  background : url("../assets/bgimg.jpg") no-repeat;
  background-size: cover;
  position: relative;
}
.box {
  height: 600px;
  width: 800px;
  background: rgba(255,255,255,.3);
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  border-radius: 15px;
  box-shadow: rgba(0,0,0,.7) 0 0 20px;
}
.box .changeWindow{
  position: absolute;
  bottom:20px;
  left: 50% ;
  transform: translateX(-50%);
  height: 70px;
  width: 70px;
  border-radius: 35px;
  /*background: #1a1a1a;*/
  font-size: 50px;
  background: #4096ff;
  color:white;
  text-align: center;
  line-height: 70px;
  transition: transform 0.9s ease; /* 添加过渡效果 */
}
.box .right{
  width: 450px;
  height: 600px;
  position: absolute;
  top:0;
  right:0;
  box-sizing: border-box;
  border-radius: 15px;
}
.box .left{
  width: 350px;
  height: 600px;
  position: absolute;
  top: 0 ;
  left:0;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 15px;
}
.box .left img{
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 15px;
}
</style>